<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="init.css">
    <style>
	    .container {
	        width: 1210px;
	        margin: 0 auto;
	        height: 500px;
	        background: rgba(0, 0, 0, .1);
	        padding: 15px;
	        font-size: 14px;
	    }
	    /*筛选条件样式*/
	    .select-list{
	    	padding-bottom: 15px;
	    }
	    .select-list dl{
	    	line-height: 25px;
	    }
	    .select-list dt,.select-list dd{
	    	float: left;
	    	cursor: pointer;
	    	border-radius: 3px;
	    }
	    .select-list dt{
	    	width: 4em;
	    }
	    .select-list dd{
	    	padding: 0 15px;
	    	margin-right: 2px;
	    }
	    .select-list dd.selected{
	    	background: #f60;
	    	color: #fff;
	    }
	    .select-list dd:hover{
	    	background: #f3edc2;
	    	color: #f60;
	    }

	    /*筛选结果样式*/
	    .select_result{
	    	line-height: 25px;

	    }
	    .select_condition{
	    	float: left;
	    	height: 40px;
	    	padding-right: 5px;
	    }
	    #select_result_cont li{
	    	padding: 0 30px 0 15px;
	    	position: relative;
	    	display: inline-block;
	    	line-height: 25px;
	    	border: 1px solid #ccc;
	    	border-radius: 3px;
	    	float: left;
	    	margin-right: 5px;
	    }
	    #select_result_cont li span{
	    	display: none;
	    	position: absolute;
	    	top: 0;
	    	right: 0;
	    	color: red;
	    	padding-right:10px;
	    	cursor: pointer;
	    }
	    #select_result_cont li:hover span{
	    	display: block;
	    }

	    #calcel_select_tip{
	    	padding-left: 5px;
	    	cursor: pointer;
	    	display: none;
	    }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li class="select-list">
                <dl id="select1" class="clearfix">
                    <dt>区域：</dt>
                    <dd class="select-all selected">不限</dd>
                    <dd>黄陂区</dd>
                    <dd>江夏区</dd>
                    <dd>东西湖区</dd>
                    <dd>新洲区</dd>
                    <dd>蔡甸区</dd>
                    <dd>汉南区</dd>
                </dl>
            </li>
            <li class="select-list">
                <dl id="select2" class="clearfix">
                    <dt>租金：</dt>
                    <dd class="select-all selected">不限</dd>
                    <dd>200元以下</dd>
                    <dd>200-500元</dd>
                    <dd>500-1000元</dd>
                    <dd>1000-1500元</dd>
                    <dd>1500-2000元</dd>
                    <dd>2000元以上</dd>
                </dl>
            </li>
            <li class="select-list">
                <dl id="select3" class="clearfix">
                    <dt>面积：</dt>
                    <dd class="select-all selected">不限</dd>
                    <dd>100平米以下</dd>
                    <dd>200-500平米</dd>
                    <dd>500-1000平米</dd>
                    <dd>1000-1500平米</dd>
                    <dd>1500-2000平米</dd>
                    <dd>2000平米以上</dd>
                </dl>
            </li>
            <li class="select-list">
                <dl id="select4" class="clearfix">
                    <dt>方式：</dt>
                    <dd class="select-all selected">不限</dd>
                    <dd>整租</dd>
                    <dd>合租</dd>
                    <dd>其他</dd>
                </dl>
            </li>
            <li class="select-list">
                <dl id="select5" class="clearfix">
                    <dt>用途：</dt>
                    <dd class="select-all selected">不限</dd>
                    <dd>民宿</dd>
                    <dd>养老</dd>
                    <dd>创业</dd>
                    <dd>其他</dd>
                </dl>
            </li>
            <li class="select-list">
                <dl id="select6" class="clearfix">
                    <dt>期限：</dt>
                    <dd class="select-all selected">不限</dd>
                    <dd>2年</dd>
                    <dd>2-5年</dd>
                    <dd>5-10年</dd>
                    <dd>10年以上</dd>
                </dl>
            </li>
        </ul>
        <div class="select_result">
            <div class="select_condition">当前找房条件：<span id="no_select_tip">暂时没有选择筛选条件</span></div>
            <ul id="select_result_cont"></ul>
            <span id="calcel_select_tip"><b>✂</b>清空筛选条件</span>
        </div>
    </div>
    <script src="jquery-1.12.4.min.js"></script>
    <script src="select.js"></script>
</body>

</html>